<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处置任务</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="js/plugins/layui/css/layui.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>处置任务</h5>
                </div>
                <div class="ibox-content">
                    <div class="row mb-12">
                        <div class="col-md-4 text-left">
                            <button type="button" class="btn btn-outline btn-primary" id="addBtn">
                                <i class="fa fa-legal" aria-hidden="true"> 处置</i>
                            </button>
                            <button type="button" class="btn btn-outline btn-danger" id="delBtn">
                                <i class="fa fa-trash" aria-hidden="true"> 删除</i>
                            </button>
                        </div>
                        <div class="col-md-8 form-inline text-right">
                            <div class="input-group">
                                <input type="text" style="width:100px;" class="form-control test-item" name="start"
                                       placeholder="起始日期" autocomplete="off"/>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                            -
                            <div class="input-group">
                                <input type="text" style="width:100px;" class="form-control test-item" name="end"
                                       placeholder="结束日期" autocomplete="off"/>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" style="width:180px;" class="form-control" name="search" id="demoReload"
                                   autocomplete="off" placeholder="请输入关键字">
                            <button type="submit" class="btn btn-primary searchBtn" data-type="reload">搜索</button>
                        </div>
                    </div>
                    <table class="layui-hide" id="table_user"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/plugins/layui/layui.all.js"></script>
<script src="js/loading.js"></script>
<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {

        $("#addBtn").click(function () {
            var index = layer.open({
                title: '调查任务',
                type: 2,
                content: 'pages/risk_task_form.html',
                area: ['80%', '90%'],
                resize: true,
                fix: false,
                maxmin:false
            });
        });
        $("#delBtn").click(function () {
            layer.confirm('您确定要删除吗？', {btn: ['确定', '取消']}, function (index) {
                layer.close(index);
                loading({
                    isShow: true,
                    text: "正在删除..."
                });
                window.setTimeout(function () {
                    loading({
                        isShow: false
                    });
                }, 500);
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            lay('.test-item').each(function () {
                laydate.render({
                    elem: this
                    , trigger: 'click'
                });
            });
        });

        layui.use('table', function () {
            var table = layui.table;
            //方法级渲染
            table.render({
                elem: '#table_user'
                , url: 'data/examine_data.json'
                , cellMinWidth: 80
                , cols: [[
                    {checkbox: true, fixed: true}
                    , {field: 'id', title: '编号', sort: true, fixed: true}
                    , {field: 'eventName', title: '事件名称', sort: true}
                    , {field: 'companyName', title: '企业名称', sort: true}
                    , {field: 'contacts', title: '联系人', sort: true}
                    , {field: 'mobile', title: '电话', sort: true}
                    , {field: 'features', title: '表现特征', sort: true}
                    , {field: 'form', title: '表现形式', sort: true}
                    , {field: 'opinion', title: '处理意见'}
                    , {field: 'date', title: '登记时间', sort: true}
                    , {field: 'state', title: '审核状态', sort: true,templet: '#stateTpl'}
                ]]
                , id: 'testReload'
                , page: true
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.searchBtn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    });
</script>
<script type="text/html" id="stateTpl">
    {{#  if(d.state === '未审核'){ }}
    <span style="color: #ed5565;">{{ d.state }}</span>
    {{#  } else { }}
    {{ d.state }}
    {{#  } }}
</script>
</body>
</html>
